<template>
    <div>
        <!-- <a-card hoverable v-show="!isShowCacheDetail"> -->
        <!--:title=""-->
        <!-- <span slot="title" style="color:#333">{{ $t('Pool') }}</span> -->

        <NoAuthPage v-showNoAuth="'D24-1'" />

        <a-row v-userAuth="'D24-1'" v-show="!isShowCacheDetail">
            <div style="margin:0 0 1em 0 ">
                <!-- 新增 -->
                <a-button type='primary' @click="create = true" v-userAuth="'D24-2'">
                    <!-- <i class="icon icon-new16f button-icon-style"></i> -->

                    <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont>
                    {{ $t('Create') }}
                </a-button>
                <a-checkbox style="margin-left: 16px;" :checked="checked" @change="checkedChange">
                    {{ $t('查看所有元数据池') }}
                </a-checkbox>
                <!-- <a-tooltip placement='bottom' v-userAuth="'D2-3'">
                    <template slot='title'>
                        <span>{{$t('Create')}}</span>
                    </template>
                   icon='file-add' 
                    <a-button type='primary' @click="create = true">
                        <i class="icon icon-new16f"></i>
                    </a-button>
                </a-tooltip>-->
                <!-- 编辑 -->
                <!-- <a-tooltip placement='bottom' v-userAuth="'D2-4'">
                    <template slot='title'>
                        <span>{{$t('Edit')}}</span>
                    </template>
                     icon='form' 
                    <a-button :disabled="selectedRowKeys.length==0" type='primary' style="margin-left:1em" @click="modifymodal">
                        <i class="icon icon-edit16f"></i>
                    </a-button>
                </a-tooltip>-->
                <!-- 删除 -->
                <!-- <a-tooltip placement='bottom' v-userAuth="'D2-5'">
                    <template slot='title'>
                        <span>{{$t('Delete')}}</span>
                    </template>
                     icon='close-circle'
                    <a-button :disabled="selectedRowKeys.length==0" type='danger' style="margin-left:1em" @click="trash">
                        <i class="icon icon-error16f"></i>
                    </a-button>
                </a-tooltip> -->
            </div>
            <!-- <a-table class='tabstyle' :columns="poolcolumns"  :loading="loading" :rowSelection='{type:"radio",selectedRow:selectedRowKeys,onChange:onSelectChange}' :dataSource="$store.state.pooldata" size="small" rowKey='name' :pagination='pagination'> -->
            <!-- :components="tableComponents"  -->
            <a-table class="bigstyle" :columns="poolcolumns" :loading="loading" :dataSource="$store.state.pooldata"
                size="small" rowKey='name' :pagination='pagination' :locale="defaultSetting" :scroll="{ x: 1340 }">
                <!-- :rowSelection='{type:"radio",selectedRow:selectedRowKeys,onChange:onSelectChange,onSelect:onSelect}'  -->
                <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                    class='custom-filter-dropdown'>
                    <a-input v-ant-ref="c => searchInput = c" :placeholder="$t('Enter') + $t('Search-content')"
                        :value="selectedKeys[0]" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                        @pressEnter="() => handleSearch(selectedKeys, confirm)"
                        style="width: 188px; margin-bottom: 8px; display: block;" />
                    <a-button type='primary' @click="() => handleSearch(selectedKeys, confirm)" icon="search" size="small"
                        style="width: 90px; margin-right: 8px">{{ $t('Search') }}</a-button>
                    <a-button @click="() => handleReset(clearFilters)" size="small"
                        style="width: 90px">{{ $t('Reset') }}</a-button>
                </div>
                <a-icon slot="filterIcon" slot-scope="filtered" type='search'
                    :style="{ color: filtered ? '#108ee9' : undefined }" />
                <template slot="customRender" slot-scope="text, record">
                    <span v-if='searchText'>
                        <template
                            v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
                            <mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i"
                                class="highlight">{{ fragment }}</mark>
                            <template v-else>{{ fragment }}</template>
                        </template>
                    </span>
                    <template v-else>
                        <!--缓存池才能点击-->
                        <span v-if="record.is_tier" class="cache-pool-name" @click="showCacheDetail(record)">{{ text }}</span>
                        <span v-else>{{ text }}</span>
                    </template>
                </template>
                <template slot="type" slot-scope="type">
                    <span v-if="type === 'replicated'">{{ $t('副本') }}</span>
                    <span v-else-if="type === 'erasure'">{{ $t('纠删码') }}</span>
                </template>
                <template slot="applications" slot-scope="applications">
                    <span>{{ transformApplication(applications) }}</span>
                </template>
                <template slot="erasureConfig" slot-scope="erasure_config">
                    <span v-if="erasure_config && erasure_config != ''">{{ erasure_config }}</span>
                    <span v-else>-</span>
                </template>
                <span slot="disk_used">
                    <a-tooltip :title="$t('已存入的数据实际占用磁盘的容量')">
                        {{ $t('已用裸容量') }}
                        <Iconfont style="color: #006DB8;" class="icon" type="a-16_f_ic_about"></Iconfont>
                    </a-tooltip>
                </span>
                <span slot="pool_used">
                    <a-tooltip :title="$t('当前实际可使用的数据容量')">
                        {{ $t('可用容量') }}
                        <Iconfont style="color: #006DB8;" class="icon" type="a-16_f_ic_about"></Iconfont>
                    </a-tooltip>
                </span>
                <span slot="percent_used" slot-scope="percent_used, record">
                    <a-tooltip placement="left">
                        <template slot="title">
                            <div>
                                <div style="display: flex;">
                                    <!-- <div>{{$t('总裸容量')}}{{ record.disk_total }}</div> -->
                                    <div>{{ $t('已用容量') }}：{{ record.pool_used }}</div>
                                    <div style="margin-left: 8px;">{{ $t('总容量') }}：{{ record.pool_total }}</div>
                                </div>
                                <div style="display: flex;">
                                    <div>{{ $t('已用裸容量') }}：{{ record.disk_used }}</div>
                                    <div style="margin-left: 8px;">{{ $t('可用容量') }}：{{ record.pool_avail }}</div>
                                </div>
                                <!-- <div style="display: flex;"> -->
                                <!-- <div>{{$t('可用裸容量')}}：{{ record.disk_avail }}</div> -->
                                <!-- </div> -->
                            </div>
                        </template>
                        <div>{{ percent_used }}%</div>
                    </a-tooltip>
                </span>
                <span slot="usage" slot-scope="usage">
                    <!-- <a-tooltip :title="usage+'%    '"> -->
                    <a-progress :percent='Number(usage)' status='active'></a-progress><!--:showInfo="false"-->
                    <!-- </a-tooltip> -->
                </span>

                <template slot="operate" slot-scope="text, record">
                    <a-tooltip placement='top' v-userAuth="'D24-3'">
                        <template slot='title'>
                            <span>{{ $t('Edit') }}</span>
                        </template>
                        <!-- <i class="icon icon-edit16f table-operation-icon" @click="modifymodal2(record)"></i> -->

                        <Iconfont class="icon table-operation-icon" type="icon-edit16f" @click="modifymodal2(record)">
                        </Iconfont>
                    </a-tooltip>
                    <a-tooltip placement='top' v-userAuth="'D24-4'" v-if="!record.is_tier || !record.default">
                        <template slot='title'>
                            <span>{{ $t('Delete') }}</span>
                        </template>
                        <!-- <i class="icon icon-delete16f table-operation-icon" @click="trash2(record)"></i> -->

                        <Iconfont class="icon table-operation-icon" type="icon-delete16f" @click="trash2(record)">
                        </Iconfont>
                    </a-tooltip>
                    <a-tooltip placement='top' v-userAuth="'D24-6'" v-if="!record.is_tier || !record.default">
                        <template slot='title'>
                            <span>{{ $t('设置数据压缩') }}</span>
                        </template>
                        <Iconfont class="icon table-operation-icon" type="icon-pool16f" @click="handleCompress(record)">
                        </Iconfont>
                    </a-tooltip>
                </template>
                <!-- <template  slot="rd" slot-scope='rd'>
                    <div :id='rd.key'></div>
                </template>
                <template  slot="wr" slot-scope='wr'>
                    <div :id='wr.key'></div>
                </template> -->
            </a-table>
        </a-row>
        <Cpool :pool='create' @pmodal='modalchange'></Cpool>
        <Mpool :mdpool='modify' @mmodal='modifychange' :tarname='onerecord'></Mpool>
        <!-- </a-card> -->
        <CacheDetail v-if="isShowCacheDetail" @showPool="showPool" :currentCachePool="currentCachePool"
            @updateCacheData="updateCacheData" />
        <CompressDialog ref="compressRef" />
    </div>
</template>

<script>
import Cpool from './create/createpool'
import Mpool from './modify/modify'
import CacheDetail from '@/components/storage_mgr/overview/cacheDetail/CacheDetail'
import CompressDialog from './create/compressDialog.vue'
import {
    setTimeout
} from 'timers';
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
import EmptyData from '@/components/common/EmptyData'
import request from '@/request/request'
import NoAuthPage from '@/components/common/NoAuthPage'

export default {
    name: "Poolmgr",
    components: { Cpool, Mpool, EmptyData, CacheDetail, CompressDialog, NoAuthPage },
    data() {
        this.tableComponents = {
            header: {
                cell: (h, props, children) => {
                    const { key, ...restProps } = props;
                    const col = this.poolcolumns.find(col => {
                        const k = col.dataIndex || col.key;
                        return k === key;
                    });
                    if (!col || !col.width) {
                        return h('th', { ...restProps }, [...children])
                    }
                    const dragProps = {
                        key: col.dataIndex || col.key,
                        class: 'table-draggable-handle',
                        attrs: {
                            w: 10,
                            x: col.width,
                            z: 1,
                            axis: 'x',
                            draggable: true,
                            resizable: false
                        },
                        on: {
                            dragging: (x, y) => {
                                col.width = Math.max(x, 1)
                            }
                        }
                    };
                    const drag = h('vue-draggable-resizable', { ...dragProps });
                    return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
                }
            }
        }
        return {
            poolcolumns: [{
                title: this.$t('Pool') + this.$t('Name'),
                dataIndex: "name",
                key: "name",
                width: 160,
                fixed: 'left',
                // ellipsis: true,
                // sorter: (a, b) => a.name.length - b.name.length,
                scopedSlots: {
                    filterDropdown: 'filterDropdown',
                    filterIcon: 'filterIcon',
                    customRender: 'customRender',
                },
                onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus()
                        }, 0)
                    }
                },
                // fixed: 'left'
            },
            {
                title: this.$t('冗余策略'),
                dataIndex: "type",
                key: "type",
                width: 140,
                ellipsis: true,
                scopedSlots: { customRender: 'type' }
                // width:60
            },
            {
                title: this.$t('App-Type'),
                dataIndex: "applications",
                key: "applications",
                ellipsis: true,
                scopedSlots: { customRender: 'applications' },
                // customRender:(arr) => {
                //     return arr.join(' ; ')
                // }
            },
            {
                title: 'PG' + this.$t('Amount'),
                dataIndex: "pg_num",
                key: "pg_num",
                ellipsis: true,
                width: 120,
                sorter: (a, b) => a.pg_num - b.pg_num,
                // dataIndex: "pg_status",
                // key: "pg_status"
            },
            {
                title: this.$t('Duplicate') + this.$t('Amount'),
                dataIndex: "size",
                key: "size",
                ellipsis: true,
                width: 120,
                sorter: (a, b) => a.size - b.size,
            },
            //  {
            //      title: "最后改动时间",
            //      dataIndex: "last_change",
            //      key: "last_change"
            //  },
            {
                title: this.$t('Erasure-config'),
                dataIndex: "ec_profile",
                key: "ec_profile",
                width: 120,
                ellipsis: true,
                scopedSlots: { customRender: 'erasureConfig' }
            },
            {
                title: 'CRUSH' + this.$t('Rule'),
                dataIndex: "crush_rule",
                key: "crush_rule",
                ellipsis: true,
                width: 120,
            },
            {
                dataIndex: "disk_used",
                key: "disk_used",
                ellipsis: true,
                width: 120,
                slots: { title: 'disk_used' },
            },
            {
                dataIndex: "pool_avail",
                key: "pool_avail",
                ellipsis: true,
                width: 120,
                slots: { title: 'pool_used' },
            },
            {
                title: this.$t('使用率'),
                dataIndex: "percent_used",
                key: "percent_used",
                ellipsis: true,
                width: 120,
                scopedSlots: { customRender: 'percent_used' },
                sorter: (a, b) => a.percent_used - b.percent_used,
            },
            // {
            //     title: this.$t('Rd-bytes'),
            //     dataIndex: "num_rd_kb",
            //     key: "num_rd_kb",
            //     ellipsis: true,
            //     width: 120,
            //     // scopedSlots:{customRender:'rd'}
            //     // dataIndex: "rd.latest",
            //     // key: "rd.latest",
            // },
            // {
            //     title: this.$t('Wr-bytes'),
            //     dataIndex: "num_wr_kb",
            //     key: "num_wr_kb",
            //     ellipsis: true,
            //     width: 120,
            //     // scopedSlots:{customRender:'wr'}
            //     // dataIndex: "wr.latest",
            //     // key: "wr.latest",
            // },
            // {
            //     title: this.$t('Rd-requests')+'( /s)',
            //     dataIndex: "rd_rate",
            //     key: "rd_rate",
            //     width: 120,
            // },
            // {
            //     title: this.$t('Wr-requests')+'( /s)',
            //     dataIndex: "wr.rate",
            //     key: "wr.rate"
            // }
            {
                title: this.$t('Operate'),
                key: "operate",
                width: 140,
                scopedSlots: { customRender: 'operate' },
                fixed: 'right',
            }
            ],
            create: false,
            modify: false,
            searchText: '',
            searchInput: null,
            pagination: {
                defaultPageSize: 10,
                //              defaultPageSize:20,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`,
            },
            selectedRowKeys: [],
            pooldata: [],
            target: '',
            onerecord: {},
            loading: true,
            timeoutId: '',
            num: 0,
            selname: '',
            chart: '',
            defaultSetting: { emptyText: <EmptyData /> },
            isShowCacheDetail: false,
            currentCachePool: '',
            checked: false,
        }
    },
    mounted() {
        this.getdata()
        this.timeoutId = setInterval(this.getdata, 90000) //定时刷新页面数据
        this.getbasedata()
    },
    destroyed() {
        clearInterval(this.timeoutId); //清除定时器
    },
    computed: {
        getpool() {
            return this.$store.state.pooldata
        },
        getlanguage() {
            return this.$store.state.language
        }
    },
    watch: {
        getlanguage(val) {  //监听语言切换，切换data组件内的多语言
            this.poolcolumns = [{
                title: this.$t('Pool') + this.$t('Name'),
                dataIndex: "name",
                key: "name",
                width: 160,
                ellipsis: true,
                // sorter: (a, b) => a.name.length - b.name.length,
                scopedSlots: {
                    filterDropdown: 'filterDropdown',
                    filterIcon: 'filterIcon',
                    customRender: 'customRender',
                },
                onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus()
                        }, 0)
                    }
                },
                // fixed: 'left'
            },
            {
                title: this.$t('Type'),
                dataIndex: "type",
                key: "type",
                width: 120,
                ellipsis: true,
                // width:60
            },
            {
                title: this.$t('App-Type'),
                dataIndex: "applications",
                key: "applications",
                ellipsis: true,
                customRender: (arr) => {
                    return arr.join(' ; ')
                }
            },
            {
                title: 'PG' + this.$t('Amount'),
                dataIndex: "pg_num",
                key: "pg_num",
                ellipsis: true,
                width: 120,
                // dataIndex: "pg_status",
                // key: "pg_status"
            },
            {
                title: this.$t('Duplicate') + this.$t('Amount'),
                dataIndex: "size",
                key: "size",
                ellipsis: true,
                width: 120,
            },
            //  {
            //      title: "最后改动时间",
            //      dataIndex: "last_change",
            //      key: "last_change"
            //  },
            {
                title: this.$t('Erasure-config'),
                dataIndex: "ec_profile",
                key: "ec_profile",
                width: 120,
                ellipsis: true,
                scopedSlots: { customRender: 'erasureConfig' }
            },
            {
                title: 'CRUSH' + this.$t('Rule'),
                dataIndex: "crush_rule",
                key: "crush_rule",
                ellipsis: true,
                width: 120,
            },
            {
                dataIndex: "disk_used",
                key: "disk_used",
                ellipsis: true,
                width: 120,
                slots: { title: 'disk_used' },
            },
            {
                dataIndex: "pool_used",
                key: "pool_used",
                ellipsis: true,
                width: 120,
                slots: { title: 'pool_used' },
            },
            {
                title: this.$t('使用率'),
                dataIndex: "percent_used",
                key: "percent_used",
                ellipsis: true,
                width: 120,
                scopedSlots: { customRender: 'percent_used' }
            },
            // {
            //     title: this.$t('Rd-bytes'),
            //     dataIndex: "num_rd_kb",
            //     key: "num_rd_kb",
            //     ellipsis: true,
            //     width: 120,
            //     // scopedSlots:{customRender:'rd'}
            //     // dataIndex: "rd.latest",
            //     // key: "rd.latest",
            // },
            // {
            //     title: this.$t('Wr-bytes'),
            //     dataIndex: "num_wr_kb",
            //     key: "num_wr_kb",
            //     ellipsis: true,
            //     width: 120,
            //     // scopedSlots:{customRender:'wr'}
            //     // dataIndex: "wr.latest",
            //     // key: "wr.latest",
            // },
            // {
            //     title: this.$t('Rd-requests')+'( /s)',
            //     dataIndex: "rd_rate",
            //     key: "rd_rate",
            //     width: 120,
            // },
            // {
            //     title: this.$t('Wr-requests')+'( /s)',
            //     dataIndex: "wr.rate",
            //     key: "wr.rate"
            // }
            {
                title: this.$t('Operate'),
                key: "operate",
                width: 100,
                scopedSlots: { customRender: 'operate' },
                fixed: 'right',
            }
            ]
        }
    },
    methods: {
        test(current, pageSize) {
            this.pageSize = pageSize
        },
        getbasedata() {
            // this.$axios.get(this.allurl+'pool/_info').then(res=>{
            request('get', 'ops/conf/crush_rule/').then(res => {
                // console.log('获取crush列表', res)
                this.$store.commit('indexmsg', {
                    basedata: res.data,
                })
            })
        },
        getdata() {
            this.loading = true
            request('get', 'pool/').then(res => {
                // console.log('概况存储池列表',res)
                if (res.data.flag == 1) {
                    this.model(res.data.id) //返回模板
                    this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                } else {
                    let flag = !this.checked
                    let list = []
                    if (flag) {
                        list = res.data.filter(item => !item.default)
                    }
                    else {
                        list = res.data
                    }
                    this.$store.commit('getpool', {
                        pooldata: list,
                    })
                    // for(let i =0;i<this.$store.state.pooldata.length;i++){
                    //     this.$store.state.pooldata[i].rd.latest = this.bytesToSize(res.data[i].rd.latest )
                    //     this.$store.state.pooldata[i].wr.latest = this.bytesToSize(res.data[i].wr.latest )
                    // }
                    // this.loading = false
                    if (this.$store.state.pooldata.length !== 0) {
                        this.onerecord = this.$store.state.pooldata[this.num]
                    }
                }
            }).catch(err => {
                // this.loading = false;
            }).finally(() => {
                this.loading = false;
            })
        },
        handleSearch(selectedKeys, confirm) {
            confirm()
            this.searchText = selectedKeys[0]
        },
        handleReset(clearFilters) {
            clearFilters()
            this.searchText = ''
        },
        onSelect(record, selected, selectedRows) {
            this.onerecord = record;
            for (let i = 0; i < this.$store.state.pooldata.length; i++) {
                if (record.id == this.$store.state.pooldata[i].id) {
                    this.num = i
                }
			}
        },
        onSelectChange(selectedRowKeys) {
            // this.target=selectedRowKeys.join('');
            // for(var i=0;i<this.$store.state.pooldata.length;i++){
            // 	if(this.$store.state.pooldata[i].name == selectedRowKeys){
            //           this.onerecord = this.$store.state.pooldata[i]
            //           this.num = i
            // 	}
            // }
            this.selectedRowKeys = selectedRowKeys
        },
        // createMiniLineChart(data) {
        //     this.chart = new G2.Chart({
        //         container: data.key,
        //         forceFit: true,
        //         height: 30,
        //         padding: [5, 5, 5, 5]
        //     });
        //     this.chart.changeData(data.rates);
        //     this.chart.source(data.rates);
        //     // chart.legend(false);
        //     this.chart.axis(false);
        //     this.chart.tooltip({
        //     type: 'mini'
        //     });
        //     this.chart.area().position('timeindex*value').shape('smooth').opacity(0.2);
        //     this.chart.line().position('timeindex*value').opacity(1).shape('smooth');
        //     this.chart.render();
        // },
        modalchange(val, isCancel) {
            this.create = val;
            if (!isCancel) {
                this.getdata();
            }
        },
        modifychange(val, isCancel) {
            this.modify = val;
            if (!isCancel) {
                this.getdata();
            }
        },
        trash2(record) {
            let _this = this;
            this.$confirm({
                title: this.$t('Sure-to-del') + ": " + record.name + ' ？' + this.$t('Data-migration'),
                okText: this.$t('Sure'),
                okType: 'danger',
                cancelText: this.$t('Cancel'),
                onOk() {
                    request('DELETE', 'pool/', {
                        pool_id: record.id,
                        name: record.name
                    })
                        .then(res => {
                            _this.model(res.data.id) //返回模板
                            _this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                            // _this.gettask()  //任务栏信息
                            _this.getdata();
                        })
                },
                onCancel() {
                }
            })
        },
        //删除存储池
        trash() {
            let _this = this
            if (this.selectedRowKeys.length != 0) {
                this.$confirm({
                    title: this.$t('Sure-to-del') + ": " + this.onerecord.name + ' ？' + this.$t('Data-migration'),
                    okText: this.$t('Sure'),
                    okType: 'danger',
                    cancelText: this.$t('Cancel'),
                    onOk() {
                        // _this.$axios({
                        //   method: 'delete',
                        //   url: _this.allurl+'pool/',
                        //   data: {
                        //     // pool:_this.target
                        //     pool_id: _this.onerecord.id,
                        //     name: _this.onerecord.name
                        //   }
                        // })
                        request('DELETE', 'pool/', {
                            pool_id: _this.onerecord.id,
                            name: _this.onerecord.name
                        })
                            .then(res => {
                                if (res.data.flag == 0) {
                                    _this.selectedRowKeys = []; // 将选择的项清空
                                }
                                _this.model(res.data.id) //返回模板
                                _this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                                // _this.gettask()  //任务栏信息
                                _this.getdata();
                                // console.log('aaaaa', _this.selectedRowKeys)
                            })
                    },
                    onCancel() {
                    }
                })
            }
            else {
                this.$notification['error']({
                    message: this.$t('Choose') + this.$t('Operating-object'),
                })
            }
        },
        delsend() {

        },
        modifymodal() {
            if (this.selectedRowKeys.length != 0) {
                this.modify = true
            }
            else {
                this.$notification['error']({
                    message: this.$t('Choose') + this.$t('Operating-object')
                })
            }
        },
        modifymodal2(record) {
            this.onerecord = record;
            for (let i = 0; i < this.$store.state.pooldata.length; i++) {
                if (this.$store.state.pooldata[i].id == record.id) {
                    this.num = i;
                }
            }
            this.modify = true;
        },
        //获取缓存池详细信息列表
        getCachePoolInfo(record) {
            return new Promise((resolve, reject) => {
                request('get', 'pool/tier/', {
                    // params: {
                    pool_id: record.id
                    // }
                }).then(res => {
                    // console.log('缓存池详情', res);
                    if (res.data.flag == 1) {
                        this.model(res.data.id) //返回模板
                        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                    } else {
                        resolve(res);
                    }
                }).catch(err => {
                    reject(err);
                    console.log(err)
                })
            })
        },

        //显示缓存池的详情
        async showCacheDetail(record) {
            // console.log('缓存池详情', record)
            let res = await this.getCachePoolInfo(record);
            res.data.id = record.id;
            res.data.name = record.name;
            this.currentCachePool = res.data;
            this.isShowCacheDetail = true;
            console.log(this.currentCachePool)
        },
        //显示存储池表格
        showPool() {
            this.isShowCacheDetail = false;
        },

        //设置缓存池策略成功后，更新当前缓存池的数据
        updateCacheData(record) {
            this.showCacheDetail(record);
        },

        checkedChange(value) {
            this.checked = !this.checked
            this.getdata()
        },

        handleCompress(item) {
            this.$refs.compressRef.isShow = true
            this.$refs.compressRef.form.pool = item.name
            this.$refs.compressRef.getList()
        },
        transformApplication(poolList = []) {
            const list = []
            if (poolList.includes('rgw')) list.push(this.$t('对象存储'))
            if (poolList.includes('cephfs')) list.push(this.$t('文件系统'))
            if (poolList.includes('rbd')) list.push(this.$t('块设备'))
            return list.join(',')
        },
    }
};
</script>
<style scoped>
.clickRowStyl {
    /* background-color:#00b4ed */
    background-color: yellow
}

.cache-pool-name {
    cursor: pointer;
    color: var(--themeColor);
}</style>
